<!--外购一般固体废物利用处置年度台账-->
<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
      <Row class="query-form">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <Select clearable filterable style="width:300px" v-model="dataToQuery.companyName" placeholder="请选择企业"
                    :remote-method="remoteMethodSelectOrg"
                    :default-label="defaultLabel"
                    :loading="orgLoading">
              <Option v-for="(option, index) in orgLists" :value="option.orgName" :key="index">{{ option.orgName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='燃气使用种类：' prop='processingMethodId'>
            <Select v-model='dataToQuery.processingMethodId' multiple :max-tag-count="2"
                    placeholder="请选择燃气使用种类" class='query-form-el'>
              <Option v-for="item in dictMap.processingMethods" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label='用气类型：' prop='gasConsumptionType'>
            <Select v-model='dataToQuery.gasConsumptionType' multiple :max-tag-count="2" placeholder="请选择用气类型"
                    class='query-form-el'>
              <Option v-for="item in dictMap.gasConsumptionTypes" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8" offset="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <!--<Button size="large" class="ivu-btn-add" icon="md-download" @click="downloadDescriptionExcel">导出模板</Button>-->
          <!--<Button size="large" class="ivu-btn-add" icon="md-cloud-upload" @click="beachUpload">批量导入</Button>-->
          <download-button :api="exportUrl" :query-form="dataToQuery" />
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows' 
           @on-sort-change="sortChange"
           :loading='pageStatus.loading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>
    <Modal :title="this.getModalTitle('燃气使用部位台账')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom"
                :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='单位名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <div v-else>
                    <cascader-dom v-if="show" class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId'
                                  @setOrgname="setCompanyName" :orgTree="true"
                                  :currentOrgId="dataToView.companyId"
                                  :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                  </div>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='分子公司、区域项目：' prop='regionalCompanyName'>
                  <div v-if="mode === 'view'">{{ dataToView.regionalCompanyName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写分子公司、区域项目" type='text'
                         v-model='dataToView.regionalCompanyName'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='用气类型：' prop='gasConsumptionType'>
                  <div v-if="mode === 'view'">{{ dataToView.gasConsumptionTypeName }}</div>
                  <Select v-else v-model='dataToView.gasConsumptionType' placeholder="请选择用气类型"
                          class='query-form-el'>
                    <Option v-for="item in dictMap.gasConsumptionTypes" :value="item.codingCodeId"
                            :key="item.codingCodeId">{{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="11" v-if="dataToView.gasConsumptionType !='env-00017000000005'">
                <FormItem label='地理位置：' prop='address'>
                  <div v-if="mode === 'view'">{{ dataToView.address }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写地理位置" type='text'
                         v-model='dataToView.address'></Input>
                </FormItem>
              </Col>
              <Col span="11" v-else></Col>
            </Row>
            <div v-if="dataToView.gasConsumptionType !='env-00017000000005'">
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='涉及面积（m²）：' prop='areaInvolved'>
                    <div v-if="mode === 'view'">{{ dataToView.areaInvolved }}</div>
                    <InputNumber v-else class='query-form-el' placeholder="请填写涉及面积（m2）" min='0'
                                 v-model='dataToView.areaInvolved'></InputNumber>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='燃气使用种类：' prop='processingMethodId'>
                    <div v-if="mode === 'view'">{{ dataToView.processingMethodName }}</div>
                    <Select v-else v-model='dataToView.processingMethodId' placeholder="请选择燃气使用种类"
                            class='query-form-el'>
                      <Option v-for="item in dictMap.processingMethods" :value="item.codingCodeId"
                              :key="item.codingCodeId">{{ item.codingName }}
                      </Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否单独隔离存放：' prop='isolatedStorage'>
                    <div v-if="mode === 'view'">{{ dataToView.isolatedStorage }}</div>
                    <!--<Input v-else class='query-form-el' placeholder="请填写是否单独隔离存放" type='text' v-model='dataToView.isolatedStorage'></Input>-->
                    <Select v-else v-model='dataToView.isolatedStorage' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='存放数量（个）：' prop='storageQuantity'>
                    <div v-if="mode === 'view'">{{ dataToView.storageQuantity }}</div>
                    <InputNumber v-else class='query-form-el' placeholder="请填写存放数量（个）" min='0'
                                 v-model='dataToView.storageQuantity'></InputNumber>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='单个气瓶重量：' prop='cylinderWeight'>
                    <div v-if="mode === 'view'">{{ dataToView.cylinderWeight }}</div>
                    <Input v-else class='query-form-el' placeholder="请填写单个气瓶重量" type='text'
                           v-model='dataToView.cylinderWeight'></Input>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='灶台数量（个）：' prop='stovesNumber'>
                    <div v-if="mode === 'view'">{{ dataToView.stovesNumber }}</div>
                    <InputNumber v-else class='query-form-el' placeholder="请填写灶台数量（个）" min='0' type='text'
                                 v-model='dataToView.stovesNumber'></InputNumber>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否安装燃气探测报警装置：' prop='ifGasLeakageDetectionAlarm'>
                    <div v-if="mode === 'view'">{{ dataToView.ifGasLeakageDetectionAlarm }}</div>
                    <Select v-else v-model='dataToView.ifGasLeakageDetectionAlarm' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='是否有通风装置：' prop='ifGasLeakProbe'>
                    <div v-if="mode === 'view'">{{ dataToView.ifGasLeakProbe }}</div>
                    <Select v-else v-model='dataToView.ifGasLeakProbe' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否安装灶台灭火设施：' prop='ifStoveFireFacilities'>
                    <div v-if="mode === 'view'">{{ dataToView.ifStoveFireFacilities }}</div>
                    <Select v-else v-model='dataToView.ifStoveFireFacilities' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='是否安装喷淋系统：' prop='ifSpraySystem'>
                    <div v-if="mode === 'view'">{{ dataToView.ifSpraySystem }}</div>
                    <Select v-else v-model='dataToView.ifSpraySystem' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否安装烟感系统：' prop='ifSmokeSensingSystem'>
                    <div v-if="mode === 'view'">{{ dataToView.ifSmokeSensingSystem }}</div>
                    <Select v-else v-model='dataToView.ifSmokeSensingSystem' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='是否配备灭火器：' prop='ifFireExtinguisher'>
                    <div v-if="mode === 'view'">{{ dataToView.ifFireExtinguisher }}</div>
                    <Select v-else v-model='dataToView.ifFireExtinguisher' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否定期清理：' prop='ifFlueCleaning'>
                    <div v-if="mode === 'view'">{{ dataToView.ifFlueCleaning }}</div>
                    <Select v-else v-model='dataToView.ifFlueCleaning' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='是否具备合规营业执照：' prop='ifBusinessLicense'>
                    <div v-if="mode === 'view'">{{ dataToView.ifBusinessLicense }}</div>
                    <Select v-else v-model='dataToView.ifBusinessLicense' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="dataToView.ifFlueCleaning==='是'" type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                  <FormItem v-if="mode === 'view'" label="清理记录上传：">
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')">
                      <a @click="downloadFiles(item,index)"><span
                          style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    </div>
                  </FormItem>
                  <FormItem v-else label="清理记录上传：" prop="idFiles">
                    <div>
                      <Upload ref="upload"
                              :before-upload="(file) => { beforeUpload1(file, 'id', 'gasUseAccount/1') }"
                              :show-upload-list="true"
                              :max-size="10240"
                              multiple
                              type="drag"
                              :action="fileUrl">
                        <div style="padding: 10px">
                          <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                          <p>点击将文件拖拽到这里上传</p>
                          <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                        </div>
                      </Upload>
                    </div>
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='1').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='1')"
                         :key='item'>
                      <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                      <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'gasUseAccount/1')"
                              style="margin-left: 5px;margin-bottom: 3px"/>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                      <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="dataToView.ifBusinessLicense==='是'" type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                  <FormItem v-if="mode === 'view'" label="营业执照附件：">
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')">
                      <a @click="downloadFiles(item,index)"><span
                          style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    </div>
                  </FormItem>
                  <FormItem v-else label="营业执照附件：" prop="idFiles">
                    <div>
                      <Upload ref="upload"
                              :before-upload="(file) => { beforeUpload1(file, 'id', 'gasUseAccount/2') }"
                              :show-upload-list="true"
                              :max-size="10240"
                              multiple
                              type="drag"
                              :action="fileUrl">
                        <div style="padding: 10px">
                          <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                          <p>点击将文件拖拽到这里上传</p>
                          <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                        </div>
                      </Upload>
                    </div>
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='2').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='2')" :key='item'>
                      <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                      <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'gasUseAccount/2')"
                              style="margin-left: 5px;margin-bottom: 3px"/>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                      <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='是否具备合格卫生许可证：' prop='ifHygieneLicense'>
                    <div v-if="mode === 'view'">{{ dataToView.ifHygieneLicense }}</div>
                    <Select v-else v-model='dataToView.ifHygieneLicense' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='是否自有管理：' prop='ifSelfSupport'>
                    <div v-if="mode === 'view'">{{ dataToView.ifSelfSupport }}</div>
                    <Select v-else v-model='dataToView.ifSelfSupport' class='query-form-el'>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                      <Option value="不涉及">不涉及</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row v-if="dataToView.ifHygieneLicense==='是'" type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                  <FormItem v-if="mode === 'view'" label="卫生许可证附件：">
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')">
                      <a @click="downloadFiles(item,index)"><span
                          style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    </div>
                  </FormItem>
                  <FormItem v-else label="卫生许可证附件：" prop="idFiles">
                    <div>
                      <Upload ref="upload"
                              :before-upload="(file) => { beforeUpload1(file, 'id', 'gasUseAccount/3') }"
                              :show-upload-list="true"
                              :max-size="10240"
                              multiple
                              type="drag"
                              :action="fileUrl">
                        <div style="padding: 10px">
                          <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                          <p>点击将文件拖拽到这里上传</p>
                          <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                        </div>
                      </Upload>
                    </div>
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='3').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='3')" :key='item'>
                      <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                      <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'gasUseAccount/3')"
                              style="margin-left: 5px;margin-bottom: 3px"/>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                      <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="11">
                  <FormItem label='自管责任单位部门：' prop='managementFirstResponsibleParty'>
                    <div v-if="mode === 'view'">{{ dataToView.managementFirstResponsibleParty }}</div>
                    <Input v-else class='query-form-el' placeholder="请填写自管责任单位部门" type='text'
                           v-model='dataToView.managementFirstResponsibleParty'></Input>
                  </FormItem>
                </Col>
                <Col span="11">
                  <FormItem label='餐饮企业名称：' prop='restaurantEnterpriseName'>
                    <div v-if="mode === 'view'">{{ dataToView.restaurantEnterpriseName }}</div>
                    <Input v-else class='query-form-el' placeholder="请填写餐饮企业名称" type='text'
                           v-model='dataToView.restaurantEnterpriseName'></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                  <FormItem v-if="mode === 'view'" label="相关协议/供气合同或协议附件：">
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')">
                      <a @click="downloadFiles(item,index)"><span
                          style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                    </div>
                  </FormItem>
                  <FormItem v-else label="相关协议/供气合同或协议附件：" prop="idFiles">
                    <div>
                      <Upload ref="upload"
                              :before-upload="(file) => { beforeUpload1(file, 'id', 'gasUseAccount/4') }"
                              :show-upload-list="true"
                              :max-size="10240"
                              multiple
                              type="drag"
                              :action="fileUrl">
                        <div style="padding: 10px">
                          <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                          <p>点击将文件拖拽到这里上传</p>
                          <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                        </div>
                      </Upload>
                    </div>
                    <div v-show="dataToView.idFiles.filter(t=>t.field==='4').length>0"
                         v-for="(item,index) in dataToView.idFiles.filter(t=>t.field==='4')" :key='item'>
                      <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                      <Button type="text" icon="md-trash" @click="removeFile1(item.id, 'id', 'gasUseAccount/4')"
                              style="margin-left: 5px;margin-bottom: 3px"/>
                      <Progress v-show="uploadListVisible[item.id]" :percent="uploadListPercent[index]"></Progress>
                      <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row type="flex" justify="space-around" class="code-row-bg">
                <Col span="23">
                  <FormItem label='备注：' prop='remark'>
                    <div v-if="mode === 'view'">{{ dataToView.remark }}</div>
                    <Input v-else class='query-form-el' placeholder="请填写备注" type="textarea"
                           :autosize="{minRows:2,maxRows:5}" v-model='dataToView.remark'></Input>
                  </FormItem>
                </Col>
              </Row>
            </div>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='填报人：' prop='createUserName'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                         v-model='dataToView.createUserName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填报时间：' prop='createDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                              v-model='dataToView.createDate'></DatePicker>
                </FormItem>
              </Col>
            </Row>

          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
        </Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" :transfer=false v-model="model3" :width=700 title="燃气使用部位台帐导入"
           @on-cancel="cancelMap">
      <Form ref="map" :show-message="false" :model="map" label-position="top">
        <Row type="flex" justify="space-around" class="code-row-bg">
          <Col span="23">
            <FormItem label="" prop="file">
              <div>
                <Upload ref="upload1"
                        :before-upload="handleUpload "
                        :format="['xlsx', 'xls']"
                        accept=".xlsx, .xls"
                        :max-size="10240"
                        type="drag"
                        :action="uploadUrl">
                  <div style="padding: 10px">
                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                    <p>点击将文件拖拽到这里上传</p>
                    <span style="font-size:8px;color: #797a64">仅支持上传单个excel </span>
                  </div>
                </Upload>
              </div>
              <div v-if="fileTrue">
                <a>{{ map.file.name }}</a>
                <Button type="text" icon="md-trash" @click="map.file = {},fileTrue = false"
                        style="margin-left: 5px;margin-bottom: 3px"/>
              </div>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-save' :disabled="uploadDissabled" @click="submitFile('map')">确定</Button>
        <Button type="primary" class='ivu-btn-cancel' @click="cancelMap">取消</Button>
      </div>
    </Modal>

    <Modal title="导入详情" v-model="logInfoModel" :transfer=false :mask-closable="false">
      <Row type="flex" justify="space-around" class="code-row-bg">
        <Col span="23">
          <div v-html="logInfo"></div>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-cancel' @click="logInfoModel=false,logInfo=null">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'

var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage, cookie} from '@/common/cacheUtils.js';

export default {
  components: {cascaderDom},
  data() {
    return {
      ...this.createCommonDataField(),
      imgUrl: "",
      defaultLabel: sessionStorage('userId').getObject('userId').companyName,
      orgLists: [],
      userInfo: sessionStorage('userId').getObject('userId'),
      twoLevelOrgs: [],
      orgLoading: false,
      switchFlag: false,
      columns1: [
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '单位名称', align: 'center', minWidth: 160,},
        {key: 'regionalCompanyName', title: '分子公司、区域项目', align: 'center', minWidth: 160,},
        {key: 'gasConsumptionTypeName', title: '用气类型', align: 'center', minWidth: 120,},
        {key: 'address', title: '地理位置', align: 'center', minWidth: 120, tooltip: true},
        {key: 'areaInvolved', title: '涉及面积（m²）', align: 'center', minWidth: 100,},
        {key: 'processingMethodName', title: '燃气使用种类', align: 'center', minWidth: 120,},
        {key: 'isolatedStorage', title: '是否单独隔离存放', align: 'center', minWidth: 120,},
        {key: 'storageQuantity', title: '存放数量（个）', align: 'center', minWidth: 120,},
        {key: 'cylinderWeight', title: '单个气瓶重量', align: 'center', minWidth: 120,},
        {key: 'stovesNumber', title: '灶台数量（个）', align: 'center', minWidth: 120,},
        {
          title: '消防设施', align: 'center', minWidth: 120, children: [
            {key: 'ifGasLeakageDetectionAlarm', title: '是否安装燃气探测报警装置', align: 'center', minWidth: 100,},
            {key: 'ifGasLeakProbe', title: '是否有通风装置', align: 'center', minWidth: 100,},
            {key: 'ifStoveFireFacilities', title: '是否安装灶台灭火设施', align: 'center', minWidth: 100,},
            {key: 'ifSpraySystem', title: '是否安装喷淋系统', align: 'center', minWidth: 100,},
            {key: 'ifSmokeSensingSystem', title: '是否安装烟感系统', align: 'center', minWidth: 100,},
            {key: 'ifFireExtinguisher', title: '是否配备灭火器', align: 'center', minWidth: 100,},
          ]
        },
        {
          title: '管理现状', align: 'center', minWidth: 120, children: [
            {key: 'ifFlueCleaning', title: '是否定期清理', align: 'center', minWidth: 100,},
            {key: 'ifBusinessLicense', title: '是否具备合规营业执照', align: 'center', minWidth: 100,},
            {key: 'ifHygieneLicense', title: '是否具备合格卫生许可证', align: 'center', minWidth: 100,},
            {key: 'ifSelfSupport', title: '是否自有管理', align: 'center', minWidth: 100,},
            {key: 'managementFirstResponsibleParty', title: '自管责任单位部门', align: 'center', minWidth: 160,},
            {key: 'restaurantEnterpriseName', title: '餐饮企业名称', align: 'center', minWidth: 160,},
          ]
        },
        {key: 'remark', title: '备注', align: 'center', minWidth: 120, tooltip: true},

        {key: 'belongOrgName', title: '所属二级集团', align: 'center', minWidth: 160,},
        // { key:'createUserName',title: '填报人',  align: 'center',minWidth: 120, },
        {key: 'createDate', title: '填报时间', align: 'center', minWidth: 120, render: this.renderCellDate, sortable: 'custom',},
        // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
        this.getActionColumns(),
      ],
      ruleCustom: {
        // belongOrgId: [ { required: true, message: '请填写所属二级集团', trigger: 'change',}],
        companyId: [{required: true, message: '请填写单位名称', trigger: 'change',}],
        regionalCompanyName: [{required: true, message: '请填写分子公司、区域项目', trigger: 'change',}],
        gasConsumptionType: [{required: true, message: '请填写用气类型', trigger: 'change',}],
        address: [{required: true, message: '请填写地理位置', trigger: 'change',}],
        areaInvolved: [{required: true, message: '请填写涉及面积（m2）', trigger: 'change', type: 'number'}],
        processingMethodId: [{required: true, message: '请填写燃气使用种类', trigger: 'change',}],
        // isolatedStorage: [ { required: true, message: '请填写是否单独隔离存放', trigger: 'change',}],
        // storageQuantity: [ { required: true, message: '请填写存放数量（个）', trigger: 'change',type:'number'}],
        // cylinderWeight: [ { required: true, message: '请填写单个气瓶重量', trigger: 'change',}],
        // stovesNumber: [ { required: true, message: '请填写灶台数量（个）', trigger: 'change',type:'number'}],
        // ifGasLeakageDetectionAlarm: [ { required: true, message: '请填写是否安装燃气探测报警装置', trigger: 'change',}],
        // ifGasLeakProbe: [ { required: true, message: '请填写是否有通风装置', trigger: 'change',}],
        // ifStoveFireFacilities: [ { required: true, message: '请填写是否安装灶台灭火设施', trigger: 'change',}],
        // ifSpraySystem: [ { required: true, message: '请填写是否安装喷淋系统', trigger: 'change',}],
        // ifSmokeSensingSystem: [ { required: true, message: '请填写是否安装烟感系统', trigger: 'change',}],
        // ifFireExtinguisher: [ { required: true, message: '请填写是否配备灭火器', trigger: 'change',}],
        // ifFlueCleaning: [ { required: true, message: '请填写是否定期清理', trigger: 'change',}],
        // ifBusinessLicense: [ { required: true, message: '请填写是否具备合规营业执照', trigger: 'change',}],
        // ifHygieneLicense: [ { required: true, message: '请填写是否具备合格卫生许可证', trigger: 'change',}],
        // ifSelfSupport: [ { required: true, message: '请填写是否自有管理', trigger: 'change',}],
        // managementFirstResponsibleParty: [ { required: true, message: '请填写自管责任单位部门', trigger: 'change',}],
        // restaurantEnterpriseName: [ { required: true, message: '请填写餐饮企业名称', trigger: 'change',}],
        // remark: [ { required: true, message: '请填写备注', trigger: 'change',}],
        createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
        createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
        idFiles: [{
          validator: (rule, value, callback) => {
            if (this.dataToView.gasConsumptionType != 'env-00017000000005' &&
                (this.dataToView.idFiles.filter(t => t.field === '4').length < 1 ||
                    (this.dataToView.ifFlueCleaning === '是' && this.dataToView.idFiles.filter(t => t.field === '1').length < 1) ||
                    (this.dataToView.ifBusinessLicense === '是' && this.dataToView.idFiles.filter(t => t.field === '2').length < 1) ||
                    (this.dataToView.ifHygieneLicense === '是' && this.dataToView.idFiles.filter(t => t.field === '3').length < 1))) {
              callback('附件必须上传')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }]
      },
      tableHeight: 10,
      dictMap: {},
      punishment: false,
      penaltyAmount: true,
      // api
      queryUrl: Api.queryGasUseAccount,
      exportUrl: Api.exportGasUseAccount,
      deleteUrl: Api.deleteGasUseAccount,
      getUrl: Api.getGasUseAccount,
      updateUrl: Api.updateGasUseAccount,
      saveUrl: Api.saveGasUseAccount,
      uploadUrl: Api.uploadGasUseAccount,
      show: true,
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),

      fileTrue: false,
      map: {},
      model3: false,
      uploadDissabled: false,
      logInfoModel: false,
      logInfo: null
    }
  },
  async mounted() {
    this.setTableHeight();
    this.$http.get(Api.queryDictBycode + "env-00016,env-00017", {}).then((res) => {
      this.dictMap = {
        'processingMethods': res.data.data['env-00016'],
        'gasConsumptionTypes': res.data.data['env-00017']
      }
    }).catch(e => {
      this.$Message.error("数据字典获取失败")
    });
    this.query();
    this.queryTwoOrgInfo();
  },
  methods: {
    ...pageCommonFunction,
    queryTwoOrgInfo() {
      if (sessionStorage('userId').getObject('userId').companyId != '18000000') {
        this.twoLevelOrgs.push({
          orgId: sessionStorage('userId').getObject('userId').twoLevelOrgId,
          orgName: sessionStorage('userId').getObject('userId').twoLevelOrgName
        });
      } else {
        this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
          this.twoLevelOrgs = res.data.data
        }).catch(e => {
        })
      }
    },
    remoteMethodSelectOrg(query) {
      if (query !== '') {
        this.orgLists = [];
        this.orgLoading = true;
        this.$http.get(Api.queryOrgList + "?companyId=" + this.userInfo.companyId + "&orgName=" + query + "&fromPage=1&pageSize=1000").then(res => {
          this.orgLists = res.data.data;
          this.orgLoading = false;
        }).catch(e => {
          this.orgLoading = false;
          this.$Message.error('请求失败');
        })
      } else {
        this.orgLoading = false;
      }
    },
    submitFile(map) {
      this.$refs[map].validate((valid) => {
        if (valid) {
          this.uploadDissabled = true
          let formData = new FormData();
          formData.append("file", this.map.file);
          formData.append("createUserId", this.currentUser.userId);
          formData.append("createOrgId", this.currentUser.orgInfo.orgId);
          this.$http.post(this.uploadUrl, formData).then((res) => {
            this.uploadDissabled = false
            if (res.data.status == "200") {
              // this.$Message.success("污染防治设施台账成功! 导入详情请查看控制台");
              this.logInfoModel = true
              this.logInfo = res.data.data
              this.query()
            } else {
              this.$Message.error(res.data.msg);
            }
            this.map = {}
            this.fileTrue = false
            this.model3 = false
          }).catch(e => {
            console.log(e);
            this.model3 = false
            this.map = {}
            this.uploadDissabled = false
            this.$Message.error("导入失败！请检查导入文档的格式是否正确");
          })
        } else {
          this.$Message.error('请填报完整!');
        }
      })

    },
    handleUpload(file) {
      this.map.file = file;
      this.fileTrue = true
      return false;
    },
    cancelMap() {
      this.model3 = false
      this.fileTrue = false
      this.map = {}
    },
    beachUpload() {
      this.model3 = true
      this.fileTrue = false
      this.map = {}
    },
    downloadDescriptionExcel() {
      this.$http.get(Api.templateDownload + '7', {
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "燃气使用部位台帐模板.xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
      })
    },


    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      // if (!this.dataToQuery.processingMethodId || this.dataToQuery.processingMethodId.length < 1) {
      //   this.dataToQuery.processingMethodId = null
      // }
      // if (!this.dataToQuery.gasConsumptionType || this.dataToQuery.gasConsumptionType.length < 1) {
      //   this.dataToQuery.gasConsumptionType = null
      // }
      this.queryAjax();
    },

    submit(name) {
      this.submitAjax(name);
    },
    createEmptyDataToAdd() {
      return {
        createDate: new Date(),
        createUserId: this.currentUser.userId,
        createUserName: this.currentUser.userName,
        id: this.get_uuid(),
        idFiles: [],
        processingMethodArr: [],
        storageQuantity: null,
        stovesNumber: null,
        areaInvolved: null,
      }
    },
    async afterDataToViewInit() {
      await this.getFiles1('id', 'gasUseAccount');
    },
    // querySort({column, key, order}){
    //   this.dataToQuery.key = key;
    //   this.dataToQuery.order1 = order;
    //   this.query();
    // }
  },
  watch: {},
}
</script>

<style lang='css' scoped>
.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

</style>